<template>
  <div class="bg">
    <h1 class="logo">{{chromeC.cLogo}}</h1>
    <img class="icon-img" src="@/assets/images/chrome.png">
    <div class="content">
      <h2>{{chromeC.cContent}}</h2>
    </div>
    <div class="more">
        <a :href='"https://www.google.cn/chrome/"' target="_blank">
          {{chromeC.cMore}}
        </a>
    </div>
    <img class="logo-img" src="@/assets/images/chrome-logo.png" />
  </div>
</template>

<script>
export default {
  name: 'ChromeContent',
  props: {
    chromeC: Object
  }
}
</script>

<style lang="stylus" scoped>
  .bg
    width: 100%
    height: 55.9rem
    background: black
    .logo
      position: absolute
      top: 12rem
      left: 18rem
      font: 800 3rem Raleway
      color: #fff
    .icon-img
      position: absolute
      top: 12rem
      left: 8rem
    .content
      position: absolute
      top: 20rem
      left: 18rem
      width: 24rem
      color: #fff
      text-align: center
    .more
      position: absolute
      top: 35rem
      left: 25.3rem
      width: 8rem
      height: 3rem
      line-height: 3rem
      text-align: center
      font-size: 1.5rem
      margin: 1rem 0 2rem 0
      background-color: yellow
    .more a:link,a:visited
      text-decoration: none
      color: black
    .more a:hover,a:active
      text-decoration: none
      color: #989898
    .logo-img
      position: absolute
      top: 14rem
      left: 70rem
</style>
